<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th v-for="item in columns">{{item}}</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td v-for="col in columns">{{item[col]}}</td>
        </tr>
      </tbody>

    </table>

    <br/>

    <ul class="pagination">
      <input id='offset' type='text' hidden value='{{offset}}'>
      <li><a href="#" v-on:click="previous()">&laquo;</a></li>
      <li><a href='#'>Total: {{total}}</a></li>
      <li><a href="#" v-on:click="next()">&raquo;</a></li>
    </ul>
  </div>


</template>

<script>
import {mapActions, mapState,mapGetters} from "vuex"
export default {
  name: 'xxx',
  data:{
  },
  computed: {
    ...mapState("xxx",{
      list, columns, offset, total
    }),
    ...mapGetters("xxx", [
      ])
  },
  methods: {
    ...mapActions('xxx', [
      'fetch','previous','next', 'struct'
    ])
  }
  mounted(){
    fetch({ 'offset': 0 ,'limit': 10 })
    count()
    struct()
  }
}
</script>
